
<template>
  <div>
    <div id="box">
      <h1>教室创建表</h1>
      <h4 class="text-danger text-left">Step1：把教室没有座位的地方取消选中，然后保存座位图</h4>
      <div class="selection-box" id="selectionBox"></div>
    </div>

    <div class="container" style="margin-top: 10px;">
      <div class="form-inline">
        <button class="btn btn-success" @click="saveSeats">保存座位图</button>
      </div>
    </div>
  </div>
</template>

<script >
import axios from 'axios';

export default {
  data() {
    return {
      isMouseDown: false,
      startX: 0,
      startY: 0,
      selectionBox: null,
      seats: null,
    };
  },
  mounted() {
    this.selectionBox = document.getElementById('selectionBox');
    this.initializeSeats();
    this.setupEventListeners();
  },
  methods: {
    initializeSeats() {
      this.seats = $.seats({
        rows: 20,
        cols: 30,
        box: "#box",
        step: 1,
      });
    },
    setupEventListeners() {
      const box = document.getElementById('box');

      box.addEventListener('mousedown', this.handleMouseDown);
      document.addEventListener('mousemove', this.handleMouseMove);
      document.addEventListener('mouseup', this.handleMouseUp);
    },
    handleMouseDown(e) {
      this.isMouseDown = true;
      this.startX = e.pageX;
      this.startY = e.pageY;

      this.selectionBox.style.left = `${this.startX}px`;
      this.selectionBox.style.top = `${this.startY}px`;
      this.selectionBox.style.width = '0px';
      this.selectionBox.style.height = '0px';
      this.selectionBox.style.display = 'block';
    },
    handleMouseMove(e) {
      if (!this.isMouseDown) return;

      const currentX = e.pageX;
      const currentY = e.pageY;

      const width = Math.abs(currentX - this.startX);
      const height = Math.abs(currentY - this.startY);

      this.selectionBox.style.left = `${Math.min(currentX, this.startX)}px`;
      this.selectionBox.style.top = `${Math.min(currentY, this.startY)}px`;
      this.selectionBox.style.width = `${width}px`;
      this.selectionBox.style.height = `${height}px`;

      // 检查每个项目是否在选择框内
      const seats = document.querySelectorAll('.seat');
      seats.forEach(seat => {
        const offset = seat.getBoundingClientRect();
        const isSelected = (offset.left >= Math.min(currentX, this.startX) &&
            offset.left + seat.offsetWidth <= Math.max(currentX, this.startX) &&
            offset.top >= Math.min(currentY, this.startY) &&
            offset.top + seat.offsetHeight <= Math.max(currentY, this.startY));

        if (isSelected) {
          // 处理选中的座位
        }
      });
    },
    handleMouseUp() {
      this.isMouseDown = false;
      this.selectionBox.style.display = 'none';
    },
    saveSeats() {
      const seatsData = JSON.stringify(this.seats.getSeats());
      localStorage.setItem("seats", seatsData);

      axios.post("https://api.jiandaoyun.com/api/v5/app/entry/data/create", {
        app_id: "674439c8cf23c01ce0ab4c29",
        entry_id: "67481b2afe9aa13592827913",
        data: {
          _widget_1732778794502: {
            value: "chm"
          },
          _widget_1733214762554: {
            value: seatsData
          }
        }
      }, {
        headers: {
          Authorization: "Bearer rAxMZm3z9yr46viKqhm0mRchkYjPn1Nw",
          "Content-Type": "application/json",
        }
      }).catch(error => {
        console.error('发生错误:', error);
      });
    }
  }
};
</script>

<style scoped>
.selection-box {
  position: absolute;
  border: 1px dashed #007bff;
  background-color: rgba(0, 123, 255, 0.2);
  display: none;
  pointer-events: none; /* 使选择框不影响鼠标事件 */
}
</style>


